/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import { baseUrl } from '../../config'
import { BasicPagination, isInvalidObject, TableCustomize, openSuccessModal, openModalMessage, compareDate, compareString } from '../../components/TableCustomize'
import {
  Row,
  Col,
  Form,
  Input,
  DatePicker,
  Upload,
  Icon,
  Button
} from 'antd';
const FormItem = Form.Item;
const formItemLayout = {
  // 抽屉里面Form。二列的布局比例
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};

class AddFrom2 extends PureComponent {
  state = {
    file: {}, fleg: true
  }
  changModel = (e) => {
    const {
      form: { getFieldsValue },
      onchangModel
    } = this.props;

    if (onchangModel) {
      onchangModel(getFieldsValue());
    }
  };
  render() {
    const { fleg } = this.state
    const {
      formData,
      operateType,
      form: { getFieldDecorator },
    } = this.props;
    const propss = {
      name: 'file',
      action: `${baseUrl}/lw-mes-file/file/uploadFile`,
      // listType: "picture-card",  // 上传格式
      headers: {
        userId: localStorage.getItem('userId'),
        Token: localStorage.getItem('token'),
        // "Content-Type": "multipart/form-data",
      },
      showUploadList: true,   // 是否展示文件列表
      // fileList: fileList,   // 已经上传的展示
      onChange: (info) => {
        this.setState({ spinning: true })
        if (info.file.status !== 'uploading') {
          console.log('上传中', info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          openSuccessModal(`${info.file.name} 文件上传成功！`);
          console.log('文件上传成功', info)
          // console.log(this.props.form.setFieldsValue('fileId', info.file.response.data.id))
          this.props.form.setFieldsValue({ 'fileId': info.file.response.data.id })
          formData.picUrl = info.file.response.data?.tomcatPath
          this.setState({ fleg: false })
          // this.setState({
          //   file: {
          //     imgId: info.file.response.data.id,
          //     imgUrl: info.file.response.data?.tomcatPath,
          //   }
          // })
          // this.uploadImg()
          // this.setState({ spinning: true })
        } else if (info.file.status === 'error') {
          openModalMessage('warning', `${info.file.name} 文件上传失败！`);
          // this.setState({ spinning: false })
        }
      },
    }
    return (
      <Form >
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'协议名称'}>
              {getFieldDecorator('agreementName', {
                initialValue: formData.agreementName || '',
                rules: [
                  {
                    required: true,
                    message: '请选择协议名称'
                  }
                ]
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'批号'}>
              {getFieldDecorator('batchNo', {
                initialValue: formData.batchNo || '',
                rules: [
                  {
                    required: true,
                    message: '请选择批号'
                  }
                ]
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'机型'}>
              {getFieldDecorator('productModelName', {
                initialValue: formData.productModelName || '',
                rules: [
                  {
                    required: true,
                    message: '请选择机型'
                  }
                ]
              })(<Input disabled onClick={this.changModel} />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'协议上传'}>
              {getFieldDecorator('fileId', {
                initialValue: formData.fileId || '',
                rules: [
                  {
                    required: true,
                    message: '请上传协议'
                  }
                ]
              })(<div>
                <Upload {...propss}>
                  <Button >
                    <Icon type="upload" /> 上传文件
                  </Button>

                  {fleg ? <div style={{
                    fontSize: 10,
                    width: '80%',
                    marginTop:'10px'
                  }}>{formData.picUrl}</div> : ''}

                  {/* <p style={{ fontSize: 10 }}>上传文件大小不超过1M</p> */}
                </Upload></div>)}
            </FormItem>
          </Col>


        </Row>
        {/* <FormItem style={{ visibility: 'hidden' }}>
          {getFieldDecorator('fileId', {
            initialValue: formData?.fileId || null,
          })(
            <Input />
          )}
        </FormItem> */}
        <FormItem style={{ visibility: 'hidden' }}>
          {getFieldDecorator('id', {
            initialValue: formData?.id || null,
          })(
            <Input />
          )}
        </FormItem>
        <FormItem style={{ visibility: 'hidden' }}>
          {getFieldDecorator('productModel', {
            initialValue: formData?.productModel || null,
          })(
            <Input />
          )}
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(AddFrom2);
